<template>
        <div>
                <div class="top"
                     v-for="(item,index) in tabs[currentIndex].list"
                     :key="index">
                        <div class="top1">
                                <div class="top4">
                                        <img :src="item.pic"
                                             alt="">
                                </div>
                                <div class="top2">
                                        <p>{{item.name}}</p>
                                        <p>{{item.jiehsao}}</p>
                                        <p>月售{{item.xiaoliang}}份</p>
                                        <div class="top3">
                                                <p>￥{{item.price}}</p>
                                                <button></button>
                                        </div>

                                </div>
                        </div>

                </div>
        </div>
</template>

<script>
import eventbus from "../utils/tools"
export default {
        data () {
                return {
                        currentIndex: 0
                }
        },
        props: ["tabs"],
        mounted () {
                //绑定事件
                eventbus.$on('deliverIndex', (index) => {
                        this.currentIndex = index;//保存接收到的值
                })
        }

}
</script>

<style lang="scss" scoped>
.top {
        margin: 60px 0;
        > .top1 {
                display: flex;
                flex: 1;

                > .top4 {
                        width: 120px;
                        height: 100px;
                        margin-right: 15px;
                        display: flex;

                        // display: inline-block;
                        > img {
                                width: 100%;
                                height: 80px;
                        }
                }
        }
        // flex-direction: column;
}
.top2 {
        // display: inline-block;
        p:nth-child(1) {
                font-size: 16px;
                font-weight: bold;
        }
        p:nth-child(2) {
                font-size: 12px;
                color: #777;
        }
        p:nth-child(3) {
                font-size: 12px;
                color: #777;
        }
        > .top3 {
                display: flex;
                justify-content: space-between;
                > p {
                        color: red;
                        font-size: 18px;
                }
        }
}
</style>